@charset "UTF-8";
@import "../../sass/_kit/variables.scss";

/**
 * 对话框
 *
 * 每一个 hd bd ft 中间内容为自我填充
 * @example
 *
 <div class="ui-dialog ">
    <div class="ui-dialog-box">
        <div class="ui-dialog-box-hd">
            <h2>分次支付，剩余期如何支付</h2>
        </div>
        <div class="ui-dialog-box-bd reasons-close">
            <dl class="stages-explain">
                <dt><i class="icon-porint"></i>方式一</dt>
                <dd>
                    在每次发货前，我们会短信／微信提醒您支付
                </dd>
                <dt><i class="icon-porint"></i>方式二</dt>
                <dd>
                    在每次发货前，进入我的服务，查看订单进行支付
                    <div>
                        我的服务
                    </div>
                </dd>
            </dl>
        </div>
        <div class="ui-dialog-box-ft">
            <div class="btn-wrap">
                <button type="button" class="btn btn-full btn-primary model-action-item">关闭</button>
            </div>
        </div>
    </div>
</div>
 */
.ui-dialog{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:99;
    background:rgba(0,0,0,.8);
    display:none;
    &.show{
        display:block;
    }
    &-box{
        background:#fff;
        position: absolute;
        z-index:100;
        width:100%;
        bottom:0;
        left:0;
        &-hd{
            padding:$rem*12 0 $rem*16 0;
            font-size:$rem*16;
            text-align:center;
            color:#464646;
            border-bottom:1px solid #d8d8d8;
            position: relative;
            .icon-close{
                &:after{
                    position: absolute;
                    right:$rem*14;
                    top:50%;
                    transform: translate(0,-50%);
                }
            }
            .icon-back{
                position: absolute;
                left:$rem*14;
                top:50%;
                transform: translate(0,-50%);
            }
        }
        &-bd{
            min-height:$rem*200;
        }
        &-ft{
            .btn-wrap{
                height:$rem*48;
                    display: flex;
                border-top:1px solid #dbdbdb;
                .btn{
                    height:100%;
                    border-radius:0;
                }
            }
        }
    }
}
.box-hd-bg{background:#f7f7f7;}

.ui-dialog-login{
    padding:$rem*20 $rem*30;
    overflow:hidden;
    .txt{font-size:$rem*12; color:#9b9b9b; margin-bottom:$rem*20; overflow: hidden; display: block;}
    .form-row{
        width:100%;
        height:$rem*49;
        margin-bottom:$rem*8;
        border-bottom:1px solid $c5;
        position: relative;
        overflow: hidden;

        em{position: absolute; top:0; left:0; display: block; height:$rem*49;}

        .mobile{
            width:$rem*12;
            background: url() no-repeat left center;
            background-size:$rem*12;
        }

        .verifi{
            width:$rem*14;
            background: url() no-repeat left center;
            background-size:$rem*14;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0;
        }
        .inp{
            width:100%;
            height:$rem*49;
            text-indent: $rem*20;
            border:0;
            outline:none;
            color:$c5;
            font-size:$rem*14;
            box-sizing: border-box;
            background:none;
        }
        button{
            position: absolute;
            right:0;
            top:0;
            font-size:$rem*14;
            color:$c20;
            text-align:right;
            height:$rem*49;
            line-height:$rem*49;
            display:block;
            border:0;
            background:none;
            color:#f05368;
        }
        .on{
            color:$c5;
        }
    }
    .btn{
        margin-top:$rem*30;
    }
    .tiperr{
        padding-top:$rem*5;
        font-size:$rem*12;
        display:block;
        i{
            padding-left:$rem*22;
            height:$rem*26;
            line-height:$rem*26;
        }
        i.ft-red{
            color:#f05368;
            background:url() no-repeat left center;
            background-size:$rem*15;
        }
        i.ft-ccc{
            color:#ccc;
            background:url() no-repeat left center;
            background-size:$rem*15;
        }
    }

}
